<template>
	<view class="container">

		<view class="user-section">
			<image class="bg" mode="aspectFill" src="../../static/userinfo/Rectangle 100.png"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.portrait || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					<text class="username">{{userInfo.nickname || '游客'}}</text>
					<view class="username" style="color: #FFFFFF;font-size: 18rpx;padding-top: 8rpx;">
						超级管理员
						</view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;color: #FFFFFF;position: relative;padding-top: 50rpx;">
				<view style="text-align: center;">
					<view class="top_title">支付金额</view>
					<view class="top_number">169999</view>
					<view class="top_tip">上周<text style="color: #FDCE9A;">17.5%</text></view>
				</view>
				<view style="text-align: center;">
					<view class="top_title">实际到账</view>
					<view class="top_number">169989</view>
					<view class="top_tip">上周<text style="color: #FDCE9A;">17.5%</text></view>
				</view>
				<view style="text-align: center;">
					<view class="top_title">支付订单</view>
					<view class="top_number">169</view>
					<view class="top_tip">上周<text style="color: #FDCE9A;">17.5%</text></view>
				</view>
				<view style="text-align: center;">
					<view class="top_title">支付订单</view>
					<view class="top_number">169</view>
					<view class="top_tip">上周<text style="color: #FDCE9A;">17.5%</text></view>
				</view>
			</view>
		</view>

		<view class="cover-container">


			<!-- 订单 -->
			<view class="order-section">
				<view @tap="goPage('shop_manager')" class="order-item" hover-class="common-hover"
					:hover-stay-time="50">
					<text class="yticon icon-dpgl"></text>
					<text>店铺管理</text>
				</view>
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50" @click="goPage('device')">
					<text class="yticon icon-sbgl"></text>
					<text>设备管理</text>
				</view>
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50" @click="goPage('vip')">
					<text class="yticon icon-hygl"></text>
					<text>会员管理</text>
				</view>
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50">
					<text class="yticon icon-kqgl"></text>
					<text>卡券管理</text>
				</view>
			</view>
			
			<view class="order-section">
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50">
					<text class="yticon icon-jfgl"></text>
					<text>积分管理</text>
				</view>
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50">
					<text class="yticon icon-scdd"></text>
					<text>商城订单</text>
				</view>
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50">
					<text class="yticon icon-tydd"></text>
					<text>体验订单</text>
				</view>
				<view class="order-item" hover-class="common-hover"
					:hover-stay-time="50">
					<text class="yticon icon-yygl"></text>
					<text>预约管理</text>
				</view>
			</view>
		</view>
		<view class="cover-container" style="padding: 27rpx 34rpx;margin-top: 29rpx;">
			<text style="font-size: 30rpx;color: #000000;">经营总览</text><text style="color: #9E9E9E;font-size: 20rpx;padding-left: 20rpx;">2023-10-19</text>
			<view style="display:flex;color: #A6A6A6;font-size: 20rpx;justify-content: space-between;align-items: center;padding-top: 23rpx;">
				<view>时间范围</view>
				<view class="sel_tab">实时</view>
				<view class="sel_tab active">近1日</view>
				<view class="sel_tab">近7日</view>
				<view class="sel_tab">近30日</view>
				<view class="sel_tab">自定义</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 44rpx;">
				<view class="card_left">
					<view style="color: #616161;font-size: 20rpx;padding-top: 28rpx;">支付金额</view>
					<view style="color: #000000;font-size: 22rpx;font-weight: bold;padding-top: 25rpx;">1066.40</view>
					<view style="color: #616161;font-size: 15rpx;padding-top: 45rpx;">上周期 <text style="color: #FF0000;">17.5%</text></view>
				</view>
				<view class="card_right">
					<view style="display: flex;justify-content: space-between;align-items: center;height: 33%;">
						<view style="width: 50%;">笔记:943,70</view>
						<view style="width: 50%;">上周期:<text style="color: #FF0000;">17.5%</text></view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;height: 33%;">
						<view style="width: 50%;">直播:--</view>
						<view style="width: 50%;">上周期:--</view>
					</view>
					<view style="display: flex;justify-content: space-between;align-items: center;height: 33%;">
						<view style="width: 50%;">商卡:123,70</view>
						<view style="width: 50%;">上周期:<text style="color: #FF0000;">168.5%</text></view>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 21rpx;">
				<view class="card_item">
					<view style="color: #616161;font-size: 20rpx;padding-top: 28rpx;">支付订单数</view>
					<view style="color: #000000;font-size: 22rpx;font-weight: bold;padding-top: 25rpx;">25</view>
					<view style="color: #616161;font-size: 15rpx;padding-top: 18rpx;">上周期 <text style="color: #FF0000;">17.5%</text></view>
				</view>
				<view class="card_item">
					<view style="color: #616161;font-size: 20rpx;padding-top: 28rpx;">支付订单数</view>
					<view style="color: #000000;font-size: 22rpx;font-weight: bold;padding-top: 25rpx;">25</view>
					<view style="color: #616161;font-size: 15rpx;padding-top: 18rpx;">上周期 <text style="color: #FF0000;">17.5%</text></view>
				</view>
				<view class="card_item">
					<view style="color: #616161;font-size: 20rpx;padding-top: 28rpx;">支付订单数</view>
					<view style="color: #000000;font-size: 22rpx;font-weight: bold;padding-top: 25rpx;">25</view>
					<view style="color: #616161;font-size: 15rpx;padding-top: 18rpx;">上周期 <text style="color: #00CB39;">17.5%</text></view>
				</view>
			</view>
			
			<view style="padding-top: 60rpx;">
				<!-- 周统计 -->
				<view class="weekdata">
					<view class="header" @click="show = true">
						<view style="display: flex;align-items: center;">
						<view style="width: 10rpx;
height: 10rpx;
background: #FDCE9A;">
						</view>
						<span style="font-size: 18rpx;color: #8C8C8C;padding-left: 15rpx;">支付金额</span>
			</view>
					</view>
					<view class="content">
						<view class="chart" :prop="weekCharts" :change:prop="echarts.updateEcharts" id="weekChart"
							:style="{ width: '100%', height: '510rpx' }">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				weekCharts: [{
					date: '',
					name: ''
				}],
				dayCharts: [{
					date: '',
					name: ''
				}],
			}
		},
		onLoad() {
			setTimeout(() => {
				this.getEcharts()
				// this.getEchartsDay()
			}, 500)
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			}
		},
		// #endif
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			getEcharts() {
				let arr = [{
						point: "1月",
						value: "1000"
					}, {
						point: "2月",
						value: "1500"
					},
					{
						point: "3月",
						value: "2000"
					},
					{
						point: "4月",
						value: "1900"
					},
					{
						point: "5月",
						value: "2500"
					},
					{
						point: "6月",
						value: "1500"
					}
				]
				let arrs = {
					value: [],
					date: [],
					ids:[]
				}
				arr.forEach((v) => {
					arrs.value.push(v.value)
					arrs.date.push(v.point)
					arrs.ids.push(Math.random() * 100)
				})
			
				this.weekCharts = arrs
			
			
			},
			getEchartsDay() {
				let arr = [{
						point: "0",
						value: "60.8"
					},
					{
						point: "1",
						value: "60.7"
					},
					{
						point: "2",
						value: "60.9"
					}
				]
				let arrs = {
					value: [],
					date: [],
					ids:[]
				}
				arr.forEach((v) => {
					arrs.value.push(v.value)
					arrs.date.push(v.point)
					arrs.ids.push(Math.random() * 100)
				})
				this.dayCharts = arrs
			
			
			},
			goPage(url){
				uni.navigateTo({
					url:`./${url}/${url}`
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login';
				}
				uni.navigateTo({
					url
				})
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	}
</script>
<script module="echarts" lang="renderjs">
	let myChart, dayChart
	export default {
		mounted() {
			if (typeof window.echarts !== 'function') {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.js'
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				// script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更  
				this.initEcharts(newValue)
				console.log(newValue, 'week')
			},
			updateEchartsDay(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更  
				this.initEchartsDay(newValue)
				console.log(newValue, 'day')
			},
			initEchartsDay(newValue) {
				let list = newValue

				let tooltip = {
					trigger: "axis",
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					},
				}

				let grid = {
					top: '30',
					left: "10",
					right: "10",
					bottom: "40",
					containLabel: true,
				}

				let dataZoom = [{
						type: 'inside',
						start: 0,
						end: 100,
					},
					{
						start: 0,
						end: 100,
					},
				]
				let xAxis = [{
					type: "category",
					data: list.date,
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						rotate: 0,
						textStyle: {
							color: '#666666'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#ccc'
						}
					}
				}]
				let yAxis = [{
					axisLabel: {
						rotate: 0,
						textStyle: {
							color: '#666666'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true
					}

				}]
				let series = [{
					name: list.name,
					type: 'line',
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(217, 249, 240, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(254, 255, 255, 1)' // 100% 处的颜色
							}]), //背景渐变色

						},
					},
					itemStyle: {
						normal: {
							color: '#00B561',
						},
					},
					emphasis: {
						focus: 'series'
					},
					symbol: 'none', //去掉折线图中的节点
					smooth: true, //true 为平滑曲线，false为直线
					data: list.value,
				}]
				dayChart = echarts.init(document.getElementById('dayChart'))
				// 观测更新的数据在 view 层可以直接访问到

				dayChart.setOption({
					tooltip,
					grid,
					xAxis,
					yAxis,
					series,
					dataZoom
				})
			},
			initEcharts(newValue) {
				let list = newValue

				let tooltip = {
					trigger: "axis",
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					},
				}
				let grid = {
					top: '30',
					left: "0",
					right: "0",
					bottom: "40",
					containLabel: true,
				}

				let dataZoom = [{
						type: 'inside',
						start: 0,
						end: 100,
					},
					{
						start: 0,
						end: 100,
					},
				]
				let xAxis = [{
					type: "category",
					data: list.date,
					axisTick: {
						alignWithLabel: true,
					},
					axisLabel: {
						rotate: 0,
						textStyle: {
							color: '#AEAEAE'
						}
					},
					axisLine: {
						lineStyle: {
							color: '#ccc'
						}
					}
				}]
				let yAxis = [{
					axisLabel: {
						rotate: 0,
						textStyle: {
							color: '#AEAEAE'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					splitLine: {
						show: true
					}

				}]
				let series = [{
					name: list.name,
					type: 'line',
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#FFFDFB' // 0% 处的颜色
							}, {
								offset: 1,
								color: '#FFE8CF' // 100% 处的颜色
							}]), //背景渐变色

						},
					},
					itemStyle: {
						normal: {
							color: '#FFE8CF',
						},
					},
					emphasis: {
						focus: 'series'
					},
					symbol: 'none', //去掉折线图中的节点
					smooth: true, //true 为平滑曲线，false为直线
					data: list.value,
				}]
				myChart = echarts.init(document.getElementById('weekChart'))
				// 观测更新的数据在 view 层可以直接访问到

				myChart.setOption({
					tooltip,
					grid,
					xAxis,
					yAxis,
					series
				})
			}
		}
	}
</script>

<style lang='scss'>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.mycard {
		width: 722rpx;
		height: 193rpx;
		background: linear-gradient(180deg, #4A4A4A 0%, #000000 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 15rpx;
	}

	.user-section {
		height: 342upx;
		padding: 41upx 50upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			/*filter: b lur(1px);
			opacity: .7; */
		}
	}

	.user-info-box {
		height: 120upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 100upx;
			height: 100upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			font-size: $font-lg + 6upx;
			color: #fff;
			margin-left: 33upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #000;
		height: 116upx;
		width: 600rpx;
		background: linear-gradient(133deg, #FFE8CF 0%, #D4A269 98%);
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		/* overflow-x: visible; */
		padding: 20upx 41upx;

		.tit {
			font-size: 20upx;
			display: flex;
			color: #000;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: 18rpx;
			color: #626262;
		}
	}

	.cover-container {
		background: #FFFFFF;
		/* margin-top: -150upx; */
		/* padding: 0 30upx; */
		position: relative;
		width: 713rpx;
		box-shadow: 4rpx 4rpx 6rpx 3rpx rgba(207,207,207,0.25);
		border-radius: 20rpx;
		margin-left: 21rpx;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;
		background: transparent;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: 40rpx;
			color: #FDCE9A;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		background-color: transparent;
		margin-top: 20upx;

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
		}

		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	.top_title{
		font-size: 20rpx;
		line-height: 23rpx;
	}
	.top_number{
		font-size: 25rpx;
		padding-top: 8rpx;
		color: #FDCE9A;
		line-height: 29rpx;
	}
	.top_tip{
		font-size: 15rpx;
		padding-top: 10rpx;
		line-height: 18rpx;
	}
	.sel_tab{
		padding: 10rpx;
		height: 36rpx;
		border-radius: 4rpx;
		line-height: 10rpx;
		text-align: center;
		border: 1rpx solid #E9E9E9;
	}
	.active{
		background-color: #E9E9E9;
		color: #000;
	}
	.card_left{
		padding-left: 23rpx;
		width: 201rpx;
		height: 201rpx;
		background: #F4F4F4;
		border-radius: 20rpx;
		border: 1rpx solid #E3E3E3;
	}
	.card_right{
		width: 424rpx;
		height: 201rpx;
		border-radius: 20rpx;
		border: 1rpx solid #E3E3E3;
		font-size: 18rpx;
		padding: 20rpx;
	}
	.card_item{
		width: 201rpx;
		height: 161rpx;
		border-radius: 20rpx;
		padding-left: 23rpx;
		border: 1rpx solid #E3E3E3;
	}
</style>
